<template>
  <div class="analysis">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="24">
          <el-radio-group v-model="analysis.type" size="small">
            <el-radio-button label="明细"/>
            <el-radio-button label="汇总"/>
          </el-radio-group>
        </el-col>
      </el-row>
    </section>
    <div v-if="analysis.type === '明细'">
      <subtable
        :table-label="tableLabel"
        :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      >
        <el-table-column slot="button" label="操作" align="center" min-width="10">
          <template slot-scope="scope">
            <el-button type="success">详情</el-button>
          </template>
        </el-table-column>
      </subtable>
      <p style="margin-top:10px;margin-bottom:0;color:#8a8a8a;font-size:12px;">注：列表结果中，不会包含没有访问过的课程</p>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div v-if="analysis.type === '汇总'">
      <el-row>
        <el-col :span="12">
          <div>
            <analysis-pie id="analysis-pie" :style="pieStyle" class-name="pie"/>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="width:520px;">
            <el-table :data="tableData2" style="width: 100%">
              <el-table-column prop="income" label="来源" min-width="10"/>
              <el-table-column prop="incomeNum" label="来源数" min-width="10"/>
              <el-table-column prop="ratio" label="占比" min-width="10"/>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Subtable from '@/components/Eltable'
import Pagination from '@/components/Pagination' // 分页组件
import analysisPie from './analysisPie'
// import { getLiveList } from "@/api/subject/live"; // 接口
// import { getTenantId } from '@/utils/auth'
export default {
  components: {
    Pagination,
    Subtable,
    analysisPie
  },
  data() {
    return {
      total: 2,
      currentpage: 1,
      pagesize: 10,
      listFilter: [],
      pieStyle: {
        width: '100%',
        height: '500px'
      },
      analysis: {
        type: '明细'
      },
      tableLabel: [
        {
          label: '公开课名称',
          width: '30',
          prop: 'name'
        },
        {
          label: '访问数',
          width: '10',
          prop: 'viewNum'
        }
      ],
      tableData: [
        {
          name: '数据分析与挖掘',
          viewNum: '4次'
        }
      ],
      tableData2: [
        {
          ratio: '60%',
          income: '公开课详情页',
          incomeNum: '3'
        },
        {
          ratio: '60%',
          income: '公开课详情页',
          incomeNum: '3'
        }
      ]
    }
  },
  mounted() {
    // this.getData();
  },
  methods: {
    handleClickCancel(scope) { },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleFilter() {
      // this.listFilter = this.zeroData.filter(item => {
      //   if (this.listQuery.subject === "课程名") {
      //     if (
      //       this.listQuery.title &&
      //       item.courseName
      //         .toLowerCase()
      //         .indexOf(this.listQuery.title.toLowerCase()) < 0
      //     )
      //       return false;
      //   }
      //   if (this.listQuery.subject === "任务名") {
      //     if (
      //       this.listQuery.title &&
      //       item.title
      //         .toLowerCase()
      //         .indexOf(this.listQuery.title.toLowerCase()) < 0
      //     )
      //       return false;
      //   }
      //   if (
      //     this.listQuery.status === "即将开始的" &&
      //     new Date(item.startTime) < new Date()
      //   )
      //     return false;
      //   if (
      //     this.listQuery.status === "当前进行中" &&
      //     (new Date(item.startTime) > new Date() ||
      //       new Date(item.endTime) < new Date())
      //   )
      //     return false;
      //   if (
      //     this.listQuery.status === "已结束的" &&
      //     new Date(item.endTime) > new Date()
      //   )
      //     return false;
      //   if (
      //     this.dateTime &&
      //     (new Date(item.startTime) < this.dateTime[0] ||
      //       new Date(item.startTime) > this.dateTime[1])
      //   )
      //     return false;
      //   return true;
      // });
      // this.total = this.listFilter.length;
    },
    getData() {
      // getLiveList(getTenantId()).then(response => {
      //   this.zeroData = response.data.items;
      //   this.listFilter = response.data.items;
      //   this.total = response.data.items.length;
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
.analysis {
  margin-top: 0px;
  // padding: 14px 20px 21px 20px;
  .search-content {
    width: 100%;
  }
}
</style>
